make area around anchor be clickable?

[kojim]

Test page:

http://www.key-horse.com/linkt.html

I have a td that's styled to look something like a button, and on that
button is anchor text. So far, I can't make the entire "surface" of the
button be a part of the anchor. That is, I would like to click on /any/
place on the td/button surface and take the link. As it is now, the
only clickable area is in the text itself.

Has anyone any ideas of how to make the whole surface of this thing be
sensitive to mouse clicks?

Thank you for any suggestions. I've tried a lot of things, but no joy.

-- KO Jim

[kchayka]

kojim wrote:

http://www.key-horse.com/linkt.html

So far, I can't make the entire "surface" of the
button be a part of the anchor.
I've tried a lot of things, but no joy.

Did you try searching google?
http://www.google.com/search?num=100...le&btnG=Search

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[David Ross]

kojim wrote:

Test page:

http://www.key-horse.com/linkt.html

I have a td that's styled to look something like a button, and on that
button is anchor text. So far, I can't make the entire "surface" of the
button be a part of the anchor. That is, I would like to click on /any/
place on the td/button surface and take the link. As it is now, the
only clickable area is in the text itself.

Has anyone any ideas of how to make the whole surface of this thing be
sensitive to mouse clicks?

Thank you for any suggestions. I've tried a lot of things, but no joy.

This required a combination of HTML and CSS1. See
<URL:http://www.rossde.com/test/table_cell.html>, its source HTML,
and my primary style-sheet at
<URL:http://www.rossde.com/genl_style.css>.

The entire green area in the second row, second column, is within
the anchor; because of my primary style-sheet, it turns yellow when
the cursor is over it. Making the width of the anchor equal the
width of cell was easy. You will have to manipulate the padding to
adjust the height.

Please post a reply here when you are through using my example so
that I can remove it. I'm near the limit allowed on my ISP's Web
server.

NOTE: I only tested this with Mozilla 1.7.7. I don't know how
this looks with IE or other browsers. However, the HTML and CSS
validated at W3C.

--

David E. Ross
<URL:http://www.rossde.com/>

I use Mozilla as my Web browser because I want a browser that
complies with Web standards. See <URL:http://www.mozilla.org/>.

[Lachlan Hunt]

kojim wrote:

Test page:

http://www.key-horse.com/linkt.html

I have a td that's styled to look something like a button, and on that
button is anchor text.

What is the table markup for? Are you aware that any element may be
styled, not just tables and divs, so it is not necessary to abuse them
for that purpose. All 13 lines of markup within the body of that test
page can be reduced to a single line:

<p><a href="/ccbill/index.htm">signup</a></p>

Then, in your style sheet, style it like this:

p { float: right; }
a {
border: 4px outset black;
background-color: #e0e0e0;
color: blue;
text-align: center;
padding: 1.5em;
font-weight: bold;
font-style: italic;
}

--
Lachlan Hunt
http://lachy.id.au/
http://GetFirefox.com/ Rediscover the Web
http://GetThunderbird.com/ Reclaim your Inbox

[kojim]

> All 13 lines of markup within the body of that test

page can be reduced to a single line:

<p><a href="/ccbill/index.htm">signu*p</a></p>

Then, in your style sheet, style it like this:

p { float: right; }
a { border: 4px outset black;
background-color: #e0e0e0;
color: blue;
text-align: center;
padding: 1.5em;
font-weight: bold;
font-style: italic; }

Yes, thank you, Lachlan. That is beautiful and elegant and pleasing and
it works 100% perfectly in FF1.0. But it doesn't work for me in IE6:

http://www.key-horse.com/linkt.html

I'm very much a novice in this business, so if you could suggest a way
to make it work in IE, I'd be grateful. Thanks again!

-- KOJim

[Grant Smith - eNVENT Technologies]

The problem is that IE6 is not standards compliant and doesn't
recognize the 'box model' in CSS, so getting that scheme to work in IE
is probably not possible without some SERIOUS tweaking.

[Lachlan Hunt]

Grant Smith - eNVENT Technologies wrote:

The problem is that IE6 is not standards compliant and doesn't
recognize the 'box model' in CSS,

Yes it does. As long as you're triggering standards mode, IE6 uses the
correct box model. The incorrect box model was a bug with IE5/Win. I'm
not sure about IE6 in quirks mode, though.

--
Lachlan Hunt
http://lachy.id.au/
http://GetFirefox.com/ Rediscover the Web
http://GetThunderbird.com/ Reclaim your Inbox

[Lachlan Hunt]

kojim wrote:

All 13 lines of markup within the body of that test
page can be reduced to a single line:

<p><a href="/ccbill/index.htm">signuÂ*p</a></p>

Then, in your style sheet, style it like this:
...

Yes, thank you, Lachlan. That is beautiful and elegant and pleasing and
it works 100% perfectly in FF1.0. But it doesn't work for me in IE6:

http://www.key-horse.com/linkt.html

Yikes! I'm not sure what you're trying to do with that test page, but
it's even messier than before. What's with the extraneous abuse of the
table elements, <object style=""> element and the <div> within the <a>
(and that's just in the small part that isn't commented out)?

Did you forget my previous point that stylesheets can apply to *any*
element, not just divs and tables. All the styles you have applied to
all those extraneous elements should be applied to either the <a>
element or it's parent (probably a <p> element).

Once you clean up the markup mess and make the page validate, try asking
in c.i.w.a.stylesheets for help to fix it in IE, if you can't find an
answer with a search engine first.

--
Lachlan Hunt
http://lachy.id.au/
http://GetFirefox.com/ Rediscover the Web
http://GetThunderbird.com/ Reclaim your Inbox

[Grant Smith - eNVENT Technologies]

Well IE didn't display my box correctly AT ALL, and I haven't changed any settings, so that means that by default, IE won't display it correctly.

Grant Smith
A+, Network+, MCP x 2

B.S.I.T. Degree Program
University of Phoenix Online
gk********@email.uophx.edu

Mobile: [phone]

"Lachlan Hunt" <sp***********@gmail.com> wrote in message news:ok*******************@news-server.bigpond.net.au...
Grant Smith - eNVENT Technologies wrote:

The problem is that IE6 is not standards compliant and doesn't
recognize the 'box model' in CSS,

Yes it does. As long as you're triggering standards mode, IE6 uses the
correct box model. The incorrect box model was a bug with IE5/Win. I'm
not sure about IE6 in quirks mode, though.

--
Lachlan Hunt
http://lachy.id.au/
http://GetFirefox.com/ Rediscover the Web
http://GetThunderbird.com/ Reclaim your Inbox

[kojim]

Lachlan Hunt wrote:

Yikes! I'm not sure what you're trying to do with that test page, but it's even messier than before. What's with the extraneous abuse of the table elements, <object style=""> element and the <div> within the <a> (and that's just in the small part that isn't commented out)?
Heh! Sorry to upset you -- was just experimenting, trying things out
:-) A better test page is up there now:

http://www.key-horse.com/linkt.html
Did you forget my previous point that stylesheets can apply to *any*
element, not just divs and tables.
Certainly not! I remembered it very well and immediately used your
suggestion, thank you.
All the styles you have applied to
all those extraneous elements should be applied to either the <a>
element or it's parent (probably a <p> element).
I applied all the styles within the <a> element. Because I want the
whole surface of the button to respond to a mouse click (and couldn't
do that with a background image in a table cell) I made the button an
<img> from a 1-pixel source. All of that markup, I believe, is
straightforward except that there's a lot of it in the html file that
should perhaps be moved to the css file.

The messy part now is the markup trying to get the text label of the
button y-centered in the button's <img>.
Once you clean up the markup mess and make the page validate,
The markup is cleaner and the page does validate. The <img> label is
still within a <div>; and that <div> is still within an <object>.
try asking
in c.i.w.a.stylesheets for help to fix it in IE, if you can't find an answer with a search engine first.

OK, Thanks. In fact, it seems to work in both FF and IE now so I won't
have to tweak anything for IE, it looks like. I don't know that it
works in all browsers, though.

-- KO Jim